<template>

    <el-form :model="address" label-position="right" label-width="auto">
        <el-row :gutter="10">
            <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="address.name" placeholder="请输入姓名" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="手机号" prop="author">
                    <el-input v-model="address.phone" placeholder="请输入手机号" clearable/>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col :span="12">
                <el-form-item label="地区" prop="date">
                    <el-input v-model="address.region" placeholder="请输入地区" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="详细地址" prop="press">
                    <el-input v-model="address.address" placeholder="请输入详细地址" clearable/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-form-item>
                <template #label>
                    是否默认收货地址
                </template>
                <el-select v-model="address.is_default" placeholder="默认收货地址" style="width: 150px">
                    <el-option label="否" value="0" />-->
                    <el-option label="是" value="1" />
                </el-select>
            </el-form-item>
        </el-row>

    </el-form>

    <el-row>
        <el-col>
            <div style="text-align: center;">
                <el-button type="primary" @click="doSave">保存</el-button>
                <el-button @click="doCancel">取消</el-button>
            </div>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import {defineEmits, onMounted, ref} from 'vue'
import {ElMessage} from "element-plus";
import axios from 'axios';



//--------------------------获取用户信息-----------------------
const user=ref({
    id:'',
    yhm:'',
    pwd:'',
    yhtx:'',
    sjh:'',
    age:'',
    sex:''
});
const acquireUsers=async ()=>{
    const {data} = await axios.get('/api/user1',{params:user.value});
    user.value=data;
    address.value.user_id=user.value.id;
}
//---------------------------- 自定义组件事件 -----------------------------
const emits = defineEmits(["closeDialog", "flushPage"]);

const address = ref({
    user_id: '',
    name:'',// 姓名
    phone:'',// 手机号
    address:'',// 详细地址
    region:'',// 省、市、区
    is_default:0,// 是否默认地址
});
//
// 取消
const doCancel = () => {
    // 触发事件：关闭 dialog
    emits("closeDialog");
}
// 初始化
onMounted(()=>{
    acquireUsers();
})
// 新增
const doSave = async () => {
    const {data} = await axios.post('/api/user_adress', address.value);
    if (data > 0) {
        emits("flushPage");				// 触发事件： 刷新页面
        emits("closeDialog");			// 触发事件：关闭 dialog
        ElMessage.success("操作成功！");
    } else {
        ElMessage.error("操作失败！");
    }
}
</script>